<template>
  <div>
    <el-menu router default-active="2" class="Ecp-tab-menu" mode="horizontal">
      <el-menu-item route='/sort/platform' index="1">平台分类</el-menu-item>
      <el-menu-item route='/sort/main' index="2">主推分类</el-menu-item>
    </el-menu>
    <div class="Sort">
      <div class="Sort__header">
        <div class="Sort__header__bar"></div>
        <div class="Sort__table__header">
          <span class="Sort__table__header__item">模块名称</span>
          <span class="Sort__table__header__item"></span>
          <span class="Sort__table__header__item"></span>
        </div>
      </div>
      <div class="Sort__main" ref="mainlist">
        <ul class="Sort__main__list">
          <li class="Sort__main__item" v-for="(item, index) in hotCategoryList" :key="index">
            <span class="Sort__main__icon" @click="updateHotCategoryIcon(item, index)">
              <img :src="item.icon?item.icon:bgImg" alt="设置主推分类图标">
            </span>
              <el-cascader
                :value="[item.categoryParentId, item.categoryId]"
                @change="val => updateHotCategory(item.id, val)"
                class="Sort__main__input"
                :placeholder="item.categoryId?'':'选择主推分类'"
                :options="dropDownOption"
                filterable
              ></el-cascader>
          </li>
        </ul>
      </div>
      <no-ssr>
        <image-cropper
          ref='uploadFile'
          field="uploadFile"
          :maxSize='512'
          :width="200" :height="200" @close='imagecropperShow = false' @crop-upload-success="cropSuccess"
          :noRotate='false'
          v-show="imagecropperShow"></image-cropper>
      </no-ssr>
    </div>
  </div>
</template>

<script>
  import { uploadImage, getPurchaseCategoryList, getHotCategoryList, updateHotCategory, updateHotCategoryIcon} from "~/api/"
  import ImageCropper from '~/components/ImageCropper'
  import bgImg from '~/static/images/button_classifications_default.png'
  export default {
    components: {
      ImageCropper
    },
    async asyncData({app}) {
      try {
        const [res1, res2] = await Promise.all([getPurchaseCategoryList(app), getHotCategoryList(app)])

        if (res1.code == '0'&&res2.code ==0) return {sortTree: res1.data.tree, hotCategoryList: res2.data.hotCategoryList}
        return {sortTree: [], hotCategoryList:[], message: res1.message=='Success'?res2.message:res1.message}
      } catch (error) {
        console.error(`获取主推分类列表结构接口错误，错误信息${error}`)
      }
    },
    data() {
      return {
        bgImg,
        imagecropperShow: false,
        setHotCategoryIconId: null,
        selIndex: '',
        dropDownOption: []
      }
    },
    beforeMount() {
      if (this.hotCategoryList.length == 0&& this.message) {
        return this.$alert(res.message, '提示', {type: 'error'})
      }
      if (this.sortTree.length == 0&& this.message) {
        return this.$alert(res.message, '提示', {type: 'error'})
      }
      this.dropDownOption = this.searchOption()
    },
    mounted() {
      this.$refs.mainlist.style.height = document.documentElement.clientHeight-101+'px'
    },
    methods: {
      searchOption () {
        if (this.sortTree.length == 0) return []
        let searchArr = []
        this.sortTree.map(item => {
          let option = {value: item.id, label: item.name}
          if (item.childList&&item.childList.length > 0) {
            option['children'] = []
            item.childList.map(val => {
              option['children'].push({value: val.id, label: val.name})
            })
          }
          searchArr.push(option)
        })
        return searchArr
      },
      async updateHotCategory (id, data) {
        // console.log(data)
        const res = await updateHotCategory(this, id, data[1])
        this.$alert(res.code == '0'?'操作成功':res.message, '提示', {type: res.code == '0'?'success':'error'})
        this.getHotCategoryList()
      },
      async getHotCategoryList () {
        const res = await getHotCategoryList(this)
        if (res.code !== '0') return this.$alert(res.message, '提示', {type: 'error'})
        this.hotCategoryList = res.data.hotCategoryList
      },
      async cropSuccess(file) {
        if (this.setHotCategoryIconId == null) this.$alert('请选择正确的分类', '提示', {type: 'error'})
        this.$refs.uploadFile.off()
        // 上传图片
        const res = await uploadImage(this, file)
        if (res.code !== '0') return this.$alert(res.message, '提示', {type: 'error'})
        // 设置iconurl
        const result = await updateHotCategoryIcon(this, this.setHotCategoryIconId, res.data.url)
        if (result.code !== '0') return this.$alert(result.message, '提示', {type: 'error'})
        this.$message.success('设置成功')
        this.hotCategoryList[this.selIndex].icon = res.data.url
        this.selIndex = ''
        this.setHotCategoryIconId = null
      },
      updateHotCategoryIcon (item, index) {
        this.setHotCategoryIconId = item.id
        this.selIndex = index
        this.imagecropperShow = true
      }
    }
  }
</script>

<style lang="scss" scoped>

.Sort {
  &__main {
    background-color: #f5f9fe;
    padding-top: 20px;
    padding-left: 48px;
    &__list {
      list-style: none;
      padding-left: 0;
    }
    &__item {
      padding: 11px 0;
      height: 50px;
      line-height: 28px;
    }
    &__icon {
      display: inline-block;
      height: 28px;
      width: 28px;
      margin-right: 30px;
      background-size: 180%;
      background-position: center;
      background-repeat: no-repeat;
      font-size: 10px;
      line-height: 1;
      img {
        vertical-align: middle;
        height: 100%;
      }
      vertical-align: middle;
      cursor: pointer;
    }
    &__input {
      vertical-align: middle;
      line-height: 28px;
      & /deep/ {
        .el-input__icon {
          line-height: 28px;
        }
        .el-input--suffix {
          height: 28px;
        }
        .el-input__suffix {
          height: 28px;
        }
        .el-cascader__label {
          height: 28px;
        }
        .el-input--suffix .el-input__inner {
          height: 28px;
          border-color: #999;
        }
      }
    }
  }
  &__table {
    &__header {
      font-size: 16px;
      padding: 0px 90px 11px 45px;
      text-align: center;
      height: 32px;
      position: sticky;
      top: 0;
      &__item {
        font-weight: bold;
        &:first-child {
          float: left;
          padding-left: 16px;
          position: relative;
          &:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #409eff;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -3px;
          }
        }
        &:last-child {
          float: right;
        }
      }
    }
  }
  &__header {
    border-bottom: 1px solid #e4e7ed;
    &__bar {
      padding: 24px 90px 24px 47px;
    }
  }
}
</style>
